<template>
    <div
        class="CardlossOf"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-card class="box-card">
            <div slot="headerss" class>
                <span>卡片挂失</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <div v-show="isShowAchieve">
                    <el-form
                        ref="formData"
                        :model="formData"
                        :rules="rulesFormData"
                        label-width="120px"
                        class="formData_form_inline"
                    >
                        <el-row>
                            <el-col :span="10" :offset="2">
                                <div class="text_center width30">
                                    <el-form-item label="账户类别:" class="text_fl">
                                        <el-select
                                            v-model="formData.CATEGORY"
                                            placeholder="请选择账户类别"
                                            @change="getCATEGORYObj"
                                            disabled
                                        >
                                            <el-option
                                                v-for="item in AccountionTYPE_INFO"
                                                :label="item.label"
                                                :value="item.code"
                                                :key="item.code"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="卡号:" class="text_fl" prop="CARDNO">
                                        <el-select
                                            v-model="formData.CARDNO"
                                            placeholder="请选择卡号"
                                            @change="getCARDNBRFun"
                                            disabled
                                        >
                                            <el-option
                                                v-for="item in cardList_option"
                                                :label="item.CARDNBR"
                                                :value="item.CARDNBR"
                                                :key="item.CARDNBR"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="2">
                                <div class="text_center width30">
                                    <el-form-item label="客户姓名:" class="text_fl">
                                        <el-input
                                            v-model="formData.NAME"
                                            :disabled="true"
                                            class="el-form-item-input"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="证件号:" class="text_fl">
                                        <el-input
                                            v-model="formData.CUSTID"
                                            class="el-form-item-input"
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="10" :offset="2">
                                <div class="text_center width30">
                                    <el-form-item label="卡片状态:" class="text_fl">
                                        <span class="el-form-item-span">{{this.CARDSTAT_value}}</span>
                                    </el-form-item>
                                    <!-- <el-input v-model="formData.getCurrentDate"  type="hidden"></el-input> -->
                                    <!-- <el-input v-model="formData.getCurrentDateTime" type="hidden"></el-input> -->
                                </div>
                            </el-col>
                        </el-row>
                        <!-- 话术 -->
                        <div class="hstable_wrap" v-if="speechList.length!=0">
                            <el-table
                                :data="speechList"
                                border
                                stripe
                                header-row-class-name="headerRow"
                                ref="showListTable"
                                class="heard-bg business_table hstable"
                                @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                                <el-table-column label="业务话术">
                                    <template slot-scope="scope">{{scope.row.content}}</template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="text_center">
                            <!-- <el-button
                                type="primary"
                                size="small"
                                v-if="precardstat==='L '"
                                @click="unreportCard"
                            >解除挂失</el-button>-->
                            <el-button type="primary" size="small" @click="reportCard">挂失</el-button>
                            <!-- <el-button
                                type="primary"
                                size="small"
                                plain
                                @click="submitForm"
                            >未出账单明细查询</el-button>-->
                            <!-- <el-button type="primary" size="small" plain @click="handerReissue">换卡</el-button> -->
                        </div>
                    </el-form>
                    <el-dialog
                        v-drag
                        title="卡片挂失"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            挂失卡号：
                            <span>{{formData.CARDNO}}</span>
                        </p>
                        <p>
                            挂失日期：
                            <span>{{formData.getCurrentDate|filterDateYYYYMMDD}}</span>
                        </p>
                        <p>
                            卡产品：
                            <span>{{PRODUCT_value}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要挂失该卡吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handerCardLossof"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </span>
                    </el-dialog>
                    <el-dialog
                        v-drag
                        title="卡片解挂"
                        :visible.sync="centerDialogVisibleclose1"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            挂失卡号：
                            <span>{{this.formData.CARDNO}}</span>
                        </p>
                        <p>
                            解挂日期：
                            <span>{{this.formData.getCurrentDate|filterDateYYYYMMDD}}</span>
                        </p>
                        <p>
                            卡产品：
                            <span>{{this.PRODUCT_value}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要解挂该卡吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisibleclose1 = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handerCardLossofcloss"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <div v-show="!isShowAchieve">
                    <cardloss-of-item v-if="formDataInfo" :formDataInfo="formDataInfo"></cardloss-of-item>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import CardlossOfItem from './childItem/CardlossOfItem.vue';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import {
    closePage,
    trimString,
    getDictMappingValue,
    itoStr,
    getDictSelectList,
    updateDeal3601,
    updateDeal3004,
    getCardInfo3004, getBusinessMenuId
} from '@/utils/Common';

export default {
    // 账户信息  地址信息  卡片挂失信息
    // 4018
    name: 'CardlossOf',
    data() {
        return {
            formData: { CARDNO: '', CATEGORY: '', NAME: '', CUSTID: '', }, // 表单数据
            centerDialogVisible: false, // 弹框的显示 隐藏
            centerDialogVisibleclose1: false,
            PRODUCT_value: '', // 卡产品 在数据字典里的值
            isShowAchieve: true,
            formDataInfo: '', // 给子集组件里传值用
            CATEGORY_filter: '',
            CardStatValue: [], // CLOCD 卡状态字段值 多个
            productId: '', // 判断卡类别,
            Keytype_option: '',//证件类型选项
            STSMAIL_option: '',//账单地址选项
            pageLoading: false,
            CARDSTAT_value: '', //卡片状态
            newCardInfo_3004: '',//每次换卡的默认卡信息
            cardList_option: '',//当前账户下的所有的卡
            rulesFormData: {
                CARDNO: [
                    // { required: true, message: '卡号不能为空！', trigger: 'change' },
                    // {
                    //     validator: (rule, value, callback) => {
                    //         console.log('CARDNO_value', value);
                    //         if (value == '' || value == undefined) {
                    //             callback(new Error('卡号不能为空！'));
                    //         } else {
                    //             callback();
                    //         }
                    //     }, trigger: 'blur',
                    // },
                ],
            },
            speechList: [],//话术列表
            selectedList: [],
            precardstat: '',//挂失前状态
            MenuId: '',
        };
    },
    components: {
        CardlossOfItem,
        cardComponent,
    },
    filters: {
        filterDateYYYYMMDD: (value) => {
            value = (`${value}`).trim();
            if (value === '00000000') return value;
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },
    },

    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'cardList_3601',
            'AccountionTYPE_INFO',
            'pinFlag',
            'defaultParams',
            'isCurrentMenuInfo',
            'checAllData',
            'businessMenu',
        ]),
    },

    async mounted() {
        this.MenuId = this.$route.params.id || '';
        this.pageLoading = true;
        // 修改默认交易
        this.setDefaultCardInfo();
        //fuzhi
        this.getviewInit();
        await this.dictionaries();
        // 这个也是查字典 只需跑一次
        this.CardStatValue = await getDictSelectList('CLOCD', this);

        await this.getExecuteFun();
        // /第一次进线获取当前账户类型
        // await this.getCATEGORYObj(this.newCardInfo_3004.CATEGORY + '');
        // //获取当前账户类型下 所有的卡 
        // this.getCardListOption(this.formData.CATEGORY);
        await this.getspeechList();

    },
    methods: {
        // 修改默认交易
        setDefaultCardInfo() {
            // 这个方法只会调用一次
            this.pageLoading = true;
            if (!this.newCardInfo_3004) {
                this.newCardInfo_3004 = JSON.parse(JSON.stringify(this.cardInfo_3004));
            };
        },
        getNew3004() {
            this.formData.CATEGORY = this.newCardInfo_3004.CATEGORY + ''; // 账户类别
            this.formData.CARDSTAT = this.newCardInfo_3004.CARDSTAT;  // 卡片状态
            this.precardstat = this.newCardInfo_3004.CARDSTAT;
            this.formData.CUSTID = this.newCardInfo_3004.CUSTID;  // 证件号
            this.formData.KEYTYPE = this.newCardInfo_3004.KEYTYPE;  // 证件类型
            this.formData.NAME = this.newCardInfo_3004.NAME;  // 客户姓名
            // this.formData.CARDNO = this.newCardInfo_3004.CARDNO;  // 卡号
        },
        getviewInit() {
            this.formData = {
                getCurrentDate: moment().format('YYYYMMDD'),
                getCurrentDateTime: moment().format('hmm'),
                CANCODE: 'L', // //挂失代码
                OPTION: '000000000000000',
                LOSTTYPE: 'PHN',
            };
            this.getNew3004();
            // //获取当前账户类型下 所有的卡 
            this.getCardListOption(this.formData.CATEGORY);
        },
        // 页面校验规则
        async getExecuteFun() {
            await this.filterCardstat(this.CardStatValue);
            console.log("this.newCardInfo_3004", this.newCardInfo_3004);
            // 虚拟卡可以进行挂失操作！  只提醒 还是可以做挂失操作
            if (this.newCardInfo_3004.VCNSTS.trim() === 'A') {
                this.$alert(
                    "请注意，该卡片为虚拟卡！",
                    '挂失提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    // closePage(this.$route, this, 1);
                });
            };

            // 止付卡 和预期停卡 卡片 
            if (this.newCardInfo_3004.CARDSTAT.trim() === 'H' || this.newCardInfo_3004.CARDSTAT.trim() === "O") {
                // 当前卡片状态为 止付卡，预期停卡，禁止挂失
                this.$alert(
                    `当前卡片状态为${this.CARDSTAT_value},禁止挂失`,
                    '挂失提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            }

        },

        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        // /////////////////////////////////////////////////////////////
        // 获取账户类型
        async getCATEGORYObj(val) {
            console.log('val', val);
            // 获取账户类型
            console.log('this.AccountionTYPE_INFO', this.AccountionTYPE_INFO);
            this.AccountionTYPE_INFO.some((item) => {
                if (item.code === val) {
                    this.CATEGORY_filter = item.label;
                    return true
                }
            });
            console.log('this.CATEGORY_filter', this.CATEGORY_filter);
            //获取当前账户类型下 所有的卡 
            await this.getCardListOption(val);
        },

        //获取当前账户类型下 所有的卡 
        getCardListOption(CATEGORY_val) {
            this.cardList_option = this.cardList_3601.filter((item) => (item.CATEGORY + '').trim() === CATEGORY_val);
            console.log(" this.cardList_option ", this.cardList_option);
            if (this.cardInfo_3004.CATEGORY + '' === CATEGORY_val) {
                this.formData.CARDNO = this.cardInfo_3004.CARDNO;  // 卡号
                console.log('this.formData.CARDNO', this.formData.CARDNO);
            } else {
                this.formData.CARDNO = '';
            }
        },

        // 选择 选中的需要操作的卡 后
        async getCARDNBRFun(cardNo) {
            this.pageLoading = true;
            // 选中 需要操作的卡后 需要重新跑 3004接口
            console.log("cardNo", cardNo);
            this.formData.CARDNO = cardNo;
            // 更新 newCardInfo_3004 里的值
            await getCardInfo3004(cardNo, this);
            await this.getNew3004();
            await this.dictionaries();
            await this.getExecuteFun();
            this.pageLoading = false;
        },

        ///////////////////////////////////////////////////
        // 卡挂失操作
        reportCard() {
            // 开卡状态 
            if ((this.cardInfo_3004.CARDSTAT + '').trim() == 'A') {  //卡片未激活
                // 开卡日期 有值
                if (trimString(this.newCardInfo_3004.OPENDATE) == '00000000') { //
                    this.$alert('该卡为未制卡不能做此操作！', '卡片挂失', {
                        customClass: 'warning', type: 'warning',
                    });
                    return false;
                }
            }
            if ((this.cardInfo_3004.CARDSTAT + '').trim() === 'L') {
                this.$alert(
                    "此卡的卡片状态为:卡片丢失，不可以再次进行挂失操作！",
                    '挂失提示',
                    {
                        customClass: 'warning', type: 'warning',     // closePage(this.$route, this, 1);
                    });
                return false;
            }
            // 从数据字典里查  产品编号对应的文字
            this.$refs.formData.validate((valid) => {
                console.log('123', valid);
                if (valid) {

                    console.log("this.selectedList.length", this.selectedList.length);
                    if (this.selectedList.length != this.speechList.length) {
                        this.$alert('话术尚未全部勾选！', '提示', {
                            customClass: 'warning', type: 'warning',
                        });
                        return;
                    }
                    this.centerDialogVisible = true;
                }
            });

        },
        // 
        // 字典查找文字
        async dictionaries() {
            // 从数据字典里查  产品编号对应的文字
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.newCardInfo_3004.PRODUCT, this);
            // this.Keytype_option = await getDictSelectList('IDTYPE', this);
            // this.STSMAIL_option = await getDictSelectList('STSMAIL', this);
            // console.log(this.PRODUCT_value);
            this.CATEGORY_filter = await getDictMappingValue('CATE', this.newCardInfo_3004.CATEGORY, this);
            this.pageLoading = false;
            console.log('this.newCardInfo_3004.CATEGORY', this.newCardInfo_3004.CATEGORY);
        },
        // 
        filterCardstat(CardStatValue) {
            console.log('value', this.newCardInfo_3004.CARDSTAT);
            console.log('CardStatValue', CardStatValue);
            const value = (`${this.newCardInfo_3004.CARDSTAT}`).trim();
            console.log("value2", value);
            if (value === '') {
                this.CARDSTAT_value = '正常';
                return;
            }
            for (let index = 0; index < CardStatValue.length; index++) {
                const element = CardStatValue[index];
                if (element.code === value) {
                    this.CARDSTAT_value = element.label;
                    return;
                }
            }
        },
        // 点击确认挂失
        handerCardLossof() {
            // 卡片丢失，不可以再次进行挂失操作！
            this.centerDialogVisibleclose = false
            this.CardLossofFun(this.formData.CANCODE);

        },
        unreportCard() {

            if ((this.cardInfo_3004.CARDSTAT + '').trim() === 'L') {
                console.log("this.selectedList.length", this.selectedList.length);
                if (this.selectedList.length != this.speechList.length) {
                    this.$alert('话术尚未全部勾选！', '提示', {
                        customClass: 'warning', type: 'warning',
                    });
                    return;
                }
                this.centerDialogVisibleclose1 = true;

            } else {
                this.$alert('解挂失操作，只能是卡片丢失状态的卡可操作！', '卡片挂失', {
                    customClass: 'warning', type: 'warning',
                });
            }
        },
        // 解挂操作
        handerCardLossofcloss() {
            this.centerDialogVisibleclose1 = false;
            this.CardLossofFun('');
        },
        // 挂失交易
        CardLossofFun(CANCODE_value) {
            const defaultParam = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParam.body.appHead.tranCode = '4018';// 修改交易号
            defaultParam.body.appBody = {
                PINFLAG: this.pinFlag,
                PIN: '',
                LOSTDATE: this.formData.getCurrentDate,//遗失日期
                LOSTTIME: this.formData.getCurrentDateTime,//遗失时间
                CARDNBR: this.formData.CARDNO,// 卡号
                CANCODE: CANCODE_value,// 挂失代码
                LOSTTYPE: this.formData.LOSTTYPE,// LOSTTYPE 挂失方式  LTR信函挂失 PHN电话挂失  VTB到分行挂失 VTC到信用卡中心挂失
                OPTION: this.formData.OPTION,//检查项目选择
            }

            this.$post.common.transPort(defaultParam).then((res) => {
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '4018_卡资料信息');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        this.formDataInfo = cardlossofs;
                        this.isShowAchieve = false;
                        this.formDataInfo.CATEGORY = this.formData.CATEGORY;// 账户类别 信息保存 CATEGORY
                        this.formDataInfo.getCurrentDate = this.formData.getCurrentDate;
                        if (trimString(this.formDataInfo.body.appBody.STS) === 'L') {
                            this.$alert('卡片挂失交易成功', '卡片挂失', '提示', {
                                customClass: 'success', type: 'success',
                            });
                        } else {
                            this.$alert('卡片解挂失交易成功', '卡片解挂失', '提示', {
                                customClass: 'success', type: 'success',
                            });
                        }
                        // 只有是当前默认卡 才可以更新3004
                        if (this.formData.CARDNO === this.newCardInfo_3004.CARDNO) {
                            updateDeal3004(this.newCardInfo_3004.CARDNO, this);

                            this.updateCheckData(cardlossofs.body.appBody);
                        }
                        // 更新3601
                        updateDeal3601(this.newCardInfo_3004.CARDNO, this.newCardInfo_3004.KEYTYPE, this.newCardInfo_3004.CUSTID, this);
                    } else {
                        const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error(cardData.sysHead.rspMsg);
                }
            });
            // this.$message.success(this.formData.CARDNO+'  此卡已挂失！');
            this.centerDialogVisible = false;
            this.centerDialogVisibleclose = false;
        },
        updateCheckData(reslut_3004) {
            console.log("reslut_3004_______________", reslut_3004);
            const checAllDataItem = JSON.parse(JSON.stringify(this.checAllData));

            let reslut_3004CARDSTAT = reslut_3004.STS.trim() === '' ? '空' : reslut_3004.STS.trim();
            // if (reslut_3004CARDSTAT !== 'L') {
            //     checAllData.L.falg = false;
            // }
            if (this.precardstat.trim() === '') {
                this.precardstat = '空';
            }
            checAllDataItem[this.precardstat.trim()].falg = false;
            // 禁止卡状态是否正常
            if (checAllDataItem[reslut_3004CARDSTAT]) checAllDataItem[reslut_3004CARDSTAT].falg = true;
            // 修改验证开关 结束后再 保存一下 checAllDataItem
            this.$store.commit('common/SAVE_CHECK_DATA', checAllDataItem);
        },
        // 跳转到换卡
        handerReissue() {
            this.$router.push({
                path: '/operationDeals/ChangeCard',
            });
        },
        //
        submitForm() {
            this.MenuId = getBusinessMenuId('/businessSystem/unBillChecked', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'unBillChecked', path: '/businessSystem/unBillChecked', params: { id: this.MenuId } });

        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
    },
};
</script>

<style lang='scss'>
.CardlossOf {
    .formData_form_inline {
        .width30 {
            .el-form-item {
                /* margin-bottom: 8px; */
            }
        }
    }
    .box-card {
        border: none !important;
    }
    .el-card__header {
        padding: 8px !important;
    }
    .el-form-item-input input {
        /* width: 250px;
        height: 35px;
        line-height: 35px; */
    }

    .el-dialog__body p {
        text-align: left;
        padding-left: 30%;
        margin: 8px 5px;
        span {
            color: #3a8ee6;
        }
    }
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
